<template>
  <div>
    <section id="TopNav">
      <div id="top">
        <div id="Toptext">订单</div>
      </div>
    </section>
    <van-tabs class="nav" v-model="active">
      <van-tab title="全部">
        <div class="subject goods" v-for="(v,i) in arr" :key="i" :sname="v.sname" :imgurl="v.imgurl" :gname="v.gname" :gsize="v.gsize" :gpirce="v.gpirce" :gnum="v.gnum">
              <p><i class="iconfont icon-shouye"> {{v.sname}}</i></p>
              <div class="goods-main">
                  <div class="goods-img"><img :src="v.imgurl" alt=""></div>
                  <div>
                      <p class="goods-introduce">{{v.gname}}</p>
                      <p class="goods-size">{{v.gsize}}</p>
                      <p></p>
                  </div>
                  <div>
                      <p class="goods-UnitPrice">￥{{v.gpirce}}</p>
                      <p class="goods-size goods-number">x{{v.gnum}}</p>
                  </div>
              </div>
              <div class="buy">
                  <span class="buy-num">共{{v.gnum}}件</span>
                  <span class="buy-text">应付金额:</span>
                  <span class="buy-pirce">￥{{v | sub}}.00</span>
              </div>
               <p class="buy-again">
                  <button>再次购买</button>
              </p>
          </div>
        

      </van-tab>
      <van-tab title="待支付">
        <div class="subject goods" v-for="(v,i) in arr" :key="i" :sname="v.sname" :imgurl="v.imgurl" :gname="v.gname" :gsize="v.gsize" :gpirce="v.gpirce" :gnum="v.gnum">
              <p><i class="iconfont icon-shouye"> {{v.sname}}</i></p>
              <div class="goods-main">
                  <div class="goods-img"><img :src="v.imgurl" alt=""></div>
                  <div>
                      <p class="goods-introduce">{{v.gname}}</p>
                      <p class="goods-size">{{v.gsize}}</p>
                      <p></p>
                  </div>
                  <div>
                      <p class="goods-UnitPrice">￥{{v.gpirce}}</p>
                      <p class="goods-size goods-number">x{{v.gnum}}</p>
                  </div>
              </div>
              <div class="buy">
                  <span class="buy-num">共{{v.gnum}}件</span>
                  <span class="buy-text">应付金额:</span>
                  <span class="buy-pirce">￥{{v | sub}}.00</span>
              </div>
               <p class="buy-again">
                  <button>再次购买</button>
              </p>
          </div>
      </van-tab>
      <van-tab title="待服务">
        <div class="subject goods" v-for="(v,i) in arr" :key="i" :sname="v.sname" :imgurl="v.imgurl" :gname="v.gname" :gsize="v.gsize" :gpirce="v.gpirce" :gnum="v.gnum">
              <p><i class="iconfont icon-shouye"> {{v.sname}}</i></p>
              <div class="goods-main">
                  <div class="goods-img"><img :src="v.imgurl" alt=""></div>
                  <div>
                      <p class="goods-introduce">{{v.gname}}</p>
                      <p class="goods-size">{{v.gsize}}</p>
                      <p></p>
                  </div>
                  <div>
                      <p class="goods-UnitPrice">￥{{v.gpirce}}</p>
                      <p class="goods-size goods-number">x{{v.gnum}}</p>
                  </div>
              </div>
              <div class="buy">
                  <span class="buy-num">共{{v.gnum}}件</span>
                  <span class="buy-text">应付金额:</span>
                  <span class="buy-pirce">￥{{v | sub}}.00</span>
              </div>
               <p class="buy-again">
                  <button>再次购买</button>
              </p>
          </div>
      </van-tab>
      <van-tab title="进行中">
        <div class="subject goods" v-for="(v,i) in arr" :key="i" :sname="v.sname" :imgurl="v.imgurl" :gname="v.gname" :gsize="v.gsize" :gpirce="v.gpirce" :gnum="v.gnum">
              <p><i class="iconfont icon-shouye"> {{v.sname}}</i></p>
              <div class="goods-main">
                  <div class="goods-img"><img :src="v.imgurl" alt=""></div>
                  <div>
                      <p class="goods-introduce">{{v.gname}}</p>
                      <p class="goods-size">{{v.gsize}}</p>
                      <p></p>
                  </div>
                  <div>
                      <p class="goods-UnitPrice">￥{{v.gpirce}}</p>
                      <p class="goods-size goods-number">x{{v.gnum}}</p>
                  </div>
              </div>
              <div class="buy">
                  <span class="buy-num">共{{v.gnum}}件</span>
                  <span class="buy-text">应付金额:</span>
                  <span class="buy-pirce">￥{{v | sub}}.00</span>
              </div>
               <p class="buy-again">
                  <button>再次购买</button>
              </p>
          </div>
      </van-tab>
      <van-tab title="评价有礼"></van-tab>
    </van-tabs>

    <!-- footer -->
    <!-- <Footer /> -->
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
import {getlink} from "@/api/getapi.js"

Vue.use(Tab);
Vue.use(Tabs);
export default {
 
  data() {
    return {
      active: 2,
      arr:[]
      
    };
  },
  filters:{
    sub(val){
      let a = val.gpirce*val.gnum;
      return a
    }
  },
  mounted(){
    getlink("/api/selectords").then((ok)=>{
      console.log(ok.data)
      this.arr=ok.data
    })
  }
};
</script>

<style scoped>
  #TopNav {
    width: 100%;
    height: 1rem;
    position: fixed;
    top: 0;
    background-color: rgb(254, 254, 254);
  }
  #top {
    position: relative;
  }

  #Toptext {
    text-align: center;
    line-height: 1rem;
    font-size: 0.3rem;
  }
  .nav{
      margin-top: 1rem;
      border-top: #ececec 0.05rem solid;
  }
  /* {
      border-top: red 0.1rem solid;
  } */

  /* subject */
  .subject{
    display: inline-block;
    width: 96%;
    margin-top: 0.2rem;
    padding: 0.3rem 0.3rem 0.3rem 0.3rem;
    border-radius: 0.1rem;
    background-color: rgb(254, 254, 254);
    font-size: 0.3rem;
    box-sizing: border-box;
    line-height: 0.45rem;
    border-top: 00.2rem solid #f7f7f7;
  }
/* goods */
  .icon-shouye{
        font-size: 0.2rem;
    }
    .goods-main{
        display: flex;
        justify-content: space-between;
    }
    .goods-img{
        width: 1.6rem;
        height: 1.6rem;
    }
    .goods-img img{
        width: 1.6rem;
        height: 1.6rem;
    }
    .goods-introduce{
        font-size: 0.3rem;
    }
    .goods-size{
        color: #666666;
    }
    .goods-number{
        text-align: right;
    }
    
    /* buy */
    .buy{
      text-align: right;
    }
    .buy-num{
      color: #b4b4b4;
      margin-right: 0.1rem;
    }
    .buy-text{
      margin-right: 0.1rem;
    }
    .buy-pirce{
      color: #a02d26;
      font-size: 0.3rem;
      font-weight: bold;
    }

    /* buy-again */
    .buy-again{
      text-align: right;
      padding-top: 0.2rem;
    }
    .buy-again button{
      background-color: #cab394;
      color:white;
      border: none;
      width: 2rem;
      height: 0.6rem;
      border-radius: 0.5rem;

    }
</style>